/* 全局样式文件 */

/**
 * CSS 变量定义 - 兜底机制
 *
 * 这些变量提供基础的样式支持，主要用于：
 * 1. 主题系统加载前的初始样式
 * 2. 主题系统加载失败时的备用样式
 * 3. 系统级深色模式的自动适配
 *
 * 实际的主题变量由主题系统动态设置（src/config/theme.ts）
 */
:root {
  /* 最基础的颜色变量 - 兜底值 */
  --primary-color: #32f08c;
  --bg-color: #ffffff;
  --text-color: #333333;
  --page-bg: #f8f8f8;
  --card-bg: #ffffff;
  --border-color: #e5e5e5;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/**
 * 系统深色模式自动适配
 * 仅在主题系统未设置 data-theme 属性时生效
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --page-bg: #1a1a1a;
    --card-bg: #2a2a2a;
    --border-color: #333333;
    --shadow-light: 0 2px 8px rgba(255, 255, 255, 0.1);
    --shadow-heavy: 0 4px 16px rgba(255, 255, 255, 0.15);
  }
}

/* 全局样式重置 */

/* 页面基础样式 */
page {
  min-height: 100vh;
  background-color: var(--page-bg, #f8f8f8);
  color: var(--text-color, #333);
  font-size: var(--uni-font-size-base, 14px);
}

/* 清除默认样式 */
view,
scroll-view,
swiper,
swiper-item,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkbox,
form,
input,
label,
picker,
radio,
slider,
switch,
textarea,
navigator,
audio,
image,
video,
map,
canvas,
web-view {
  box-sizing: border-box;
}

/**
 * 主题切换过渡动画
 * 由主题系统自动添加类名，提供平滑的主题切换体验
 * 注意：微信小程序不支持通配符选择器，使用具体元素选择器
 */
.theme-transition,
.theme-transition view,
.theme-transition text,
.theme-transition button,
.theme-transition input,
.theme-transition textarea,
.theme-transition image,
.theme-transition scroll-view,
.theme-transition swiper,
.theme-transition swiper-item {
  transition:
    background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/**
 * 基础组件过渡动画
 * 为基础元素添加平滑的主题切换效果
 */
view,
text,
button,
input,
textarea {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
